<template>
	<div>
		<!-- 新闻内容 -->
		<div class="cont vue-flex">
			<div class="conttitle">最新资讯</div>
			<div class="contDiv"></div>
			<div class="contlist" ref="contlist" @mouseover="stopScroll" @mouseout="startScroll">
				<ul>
					<li v-for="(item, index) in list" :key="index" @click="tabs(item)">
						<em>{{ item.title }}</em>
					</li>
				</ul>
			</div>
		</div>

		<div class="vue-btn">
			<!-- 轮播图 -->
			<el-carousel :interval="3000" arrow="always">
				<el-carousel-item v-for="(item, index) in items" :key="index"><img class="banner" :src="item" alt="" /></el-carousel-item>
			</el-carousel>

			<div class="box1">
				<div class="info">党建资讯</div>
				<div class="vue-btn info-box" v-for="(item, index) in list" :key="index" @click="tabs(item)">
					<div class="info-msg">{{ item.title }}</div>
					<div class="info-time">{{ item.createTime }}</div>
				</div>
			</div>
		</div>
		
		<div class="vue-btn boxes">
			<div class="boxes-box boxes-box1">
				<div class="boxes-info">党建活动</div>
				<img @click="tabsActivity(activity.id)" class="boxes-icon1" :src="activity.filePath" alt="">
			</div>
			
			<div class="boxes-box boxes-box2">
				<div class="boxes-info">学习资料</div>
				<img @click="tabsData(curriculum[0].id,curriculum[0].courseType)" class="boxes-icon2" :src="curriculum[0].filePath" alt="">
				<div class="boxes-line"></div>
				<img @click="tabsData(curriculum[1].id,curriculum[1].courseType)" class="boxes-icon2" :src="curriculum[1].filePath" alt="">
			</div>
			
			<div class="boxes-box boxes-box3">
				<div class="boxes-info">友情链接</div>
				<div class="boxes-msg" v-for="(item, index) in linkLists" :key="index" @click="tabsUrl(item.linkAddress)">{{index+1}}.{{ item.linkName }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { bannerPic,newsInfo,onlineActivity,onlineClass,linkList } from '../../../network/api';
export default {
	data() {
		return {
			// 轮播图
			items: [
				// require('@/assets/img/logo.png'),
				// require('@/assets/img/logo.png'),
				// require('@/assets/img/logo.png'),
				// require('@/assets/img/logo.png'),
			],
			// 资讯
			list: [
				// { id: '1', title: '日喀则市高争商混有限责任公司年产60万立方商品混凝土建设项目土建工程劳务工序分包招标结果公示', createTime: '2019-12-18 16:20:34' },
				// { id: '2', title: '干部使用考核情况', createTime: '2019-12-18 16:20:34' },
				// { id: '3', title: '西藏天路股份有限公司网络安全升级改造项目竞争性谈判会结果公示', createTime: '2019-12-18 16:20:34' },
				// { id: '4', title: '温度报警', createTime: '2019-12-18 16:20:34' },
				// { id: '5', title: '回架报警', createTime: '2019-12-18 16:20:34' },
				// { id: '7', title: '回架报警', createTime: '2019-12-18 16:20:34' },
				// { id: '8', title: '回架报警', createTime: '2019-12-18 16:20:34' }
			],
			scrollW: 0, //记录滚动到哪了
			// 活动
			activity:{
				id:'',
				filePath:''
			},
			// 课程
			curriculum:[
				{id:'',filePath:'',courseType:''},
				{id:'',filePath:'',courseType:''}
			],
			// 友情链接
			linkLists:[
				// { id: '4', title: '百度百度百度百度百度百度百度百度百度百度百度',url: 'https://www.baidu.com'},
				// { id: '5', title: '谷歌谷歌谷歌谷歌谷歌谷歌谷歌谷歌谷歌谷歌谷歌',url: 'https://www.google.cn/'},
				// { id: '7', title: '腾讯视频腾讯视频腾讯视频腾讯视频腾讯视频腾讯视频腾讯视频',url: 'https://www.tencent.com/zh-cn' },
				// { id: '8', title: '党建教育党建教育党建教育党建教育', url: 'https://www.baidu.com' },
				// { id: '8', title: '党建教育党建教育党建教育党建教育', url: 'https://www.baidu.com' },
				// { id: '8', title: '党建教育党建教育党建教育党建教育', url: 'https://www.baidu.com' },
				// { id: '8', title: '党建教育党建教育党建教育党建教育', url: 'https://www.baidu.com' },
				// { id: '8', title: '党建教育党建教育党建教育党建教育', url: 'https://www.baidu.com' },
			],
			timer:null,
			index:0,
		};
	},
	created() {},
	mounted() {
		// 获取资讯
		this.newsInfo()
		
		// 轮播图
		this.getsss();
		// 首页活动
		this.onlineActivity();
		// 首页课程
		this.onlineClass();
		// 友情链接
		this.linkList()
	},
	methods: {
		// 资讯
		newsInfo() {
			newsInfo().then(res => {
				// console.log(res);
				this.list = res.retData.splice(0,8);
				//实例挂载完毕前
				//调用滚动代码
				this.scroll();
			});
		},
		// 轮播图
		getsss() {
			bannerPic().then(res => {
				// console.log(res);
				this.items = res.retData;
			});
		},
		
		// 活动
		onlineActivity(){
			onlineActivity().then(res => {
				// console.log(res.retData);
				this.activity = res.retData[0]
			});
		},
		
		// 课程
		onlineClass(){
			onlineClass().then(res => {
				// console.log(res.retData);
				this.curriculum = res.retData.splice(0,2)
			});
		},
		
		// 友情链接
		linkList(){
			var that = this
			
			linkList({page:1,limit:8}).then(res => {
				// console.log(res.retData);
				that.linkLists = res.retData.records
				// that.timer = setInterval(() => {
				// 	that.showTop(that.linkLists,that.linkLists.length,that.index)
				// },5000);
			});
			
		},
		
		// showTop(items,length,index){
		// 	var that = this
		// 	if(index<length){
		// 		that.$message({
		// 			offset: 200,
		// 			showClose: true,
		// 			message: items[that.index].linkName,
		// 			type: 'success'
		// 		});
		// 		that.index += 1
		// 	}else{
		// 		that.index = 0
		// 		clearInterval(that.timer); //关闭
		// 		that.linkList()
		// 	}
			
		// },

		//鼠标悬停，停止滚动
		stopScroll() {
			var target = this.$refs.contlist;
			clearInterval(this.scrollTime);
		},
		//鼠标移开 ，接着滚动
		startScroll() {
			var target = this.$refs.contlist;
			this.scrollW = target.offsetLeft; // 移开时记录向左移动的距离
			this.scroll();
		},
		//循环滚动
		scroll() {
			var that = this; //因为定时器里要使用vue对象时不能用this, 在定时器中的 this 代表
			var target = this.$refs.contlist;
			var initLeft = 0;
			if (this.scrollW < 0) {
				initLeft = this.scrollW * -1;
			}
			//定时器
			this.scrollTime = setInterval(function() {
				initLeft++;
				if (initLeft >= target.offsetWidth / 2) {
					initLeft = 0;
				}
				target.style.left = '-' + initLeft + 'px'; //获取不到translateX的值改用 left

				//target.style = 'transform: translateX(-'+ initLeft +'px)';
			}, 50);
		},

		// 资讯详情
		tabs(item) {
			this.$router.push({ path: '/index/message?item='+encodeURIComponent(JSON.stringify(item))});
		},
		
		// 党建活动
		tabsActivity(id){
			this.$router.push({ path: '/djhd/detail',query: { id: id } });
		},
		
		// 学习资料
		tabsData(id,type){
			if(type == 1){//视频
				this.$router.push({ path: '/ykt/studyDetail',query: { id: id } });
			}else if(type == 2){//图文
				this.$router.push({ path: '/ykt/studyDetail2',query: { id: id } });
			}
		},
		
		// 友情链接
		tabsUrl(url){
			// console.log(url)
			// window.open('http://58.51.184.5:8066/Web/WebNewStyle/Login.aspx')
			window.open(url)
		}
	}
};
</script>
<style lang="scss" scoped>
// 新闻
ul,
li,
em {
	margin: 0;
	padding: 0;
}
.cont {
	height: 35px;
	background-color: #fff9e9;
	overflow: hidden;
	position: relative;
	margin: 20px 0;
	padding-left: 100px;
}
.conttitle {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: #fff9e9;
	color: #fff;
	z-index: 3;
	padding-top: 10px;
	background: url('../../../assets/img/a6.png') no-repeat center;
	background-size: 100% 100%;
	width: 120px;
	margin-right: 20px;
}
.contDiv{
	width: 50px;
	position: absolute;
	left: 100px;
	top: 0;
	bottom: 0;
	background: #fff9e9;
	z-index: 2;
}
.contlist {
	position: absolute;
	white-space: nowrap;
	display: flex;
	flex-direction: row;
}
.contlist ul {
	display: flex;
	flex-direction: row;
	margin-left: 150px;
}
.contlist ul li {
	font-size: 12px;
	margin-right: 100px;
	height: 35px;
	line-height: 35px;
	display: flex;
	flex-direction: row;
}
.contlist ul li em {
	color: #cc0000;
	font-size: 12px;
	padding-right: 10px;
}

// 轮播图
.el-carousel {
	width: 680px;
}
.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}

.banner {
	width: 680px;
	height: 100%;
}

// 消息
.box1 {
	width: 500px;
	height: 300px;
	border: 1px solid #eeeeee;
	text-align: left;
	border-top: 2px solid #cc0000;
}
.info {
	font-weight: bold;
	font-size: 20px;
	color: #cb1c1d;
	padding: 10px 20px;
	border-bottom: 1px solid #eeeeee;
	margin-bottom: 5px;
}
.info-box {
	padding: 0px 20px;
}
.info-msg {
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 8px 0;
}
.info-time {
	color: #777777;
	white-space: nowrap;
	font-size: 16px;
}

// 底部
.boxes{
	margin: 20px 0;
}

.boxes-box{
	height: 360px;
	border: 1px solid #eeeeee;
	text-align: left;
	border-top: 2px solid #cc0000;
}
.boxes-box1{
	width: 38%;
}
.boxes-box2{
	width: 30%;
}
.boxes-box3{
	width: 30%;
}
.boxes-info{
	font-weight: bold;
	font-size: 20px;
	color: #cb1c1d;
	padding: 10px 20px;
	border-bottom: 1px solid #eeeeee;
	height: 40px;
	box-sizing: border-box;
}
.boxes-icon1{
	width: 100%;
	height: 320px;
}
.boxes-icon2{
	width: 100%;
	height: 155px;
}
.boxes-line{
	height: 5px;
}
.boxes-msg{
	padding: 11px 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
